<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div onclick="alert(1)">1111111</div>

    <script>

        // 事件分为两种
        //    DOM 0级事件    行内事件和普通事件绑定都属于DOM  0级事件    ---- 同类型事件只能绑定一次(覆盖)
        //    DOM 2级事件    事件监听  属于  DOM 2级事件               ----  同类型事件可以多次绑定(不会覆盖)

        // 移除事件

        // 针对0级事件  只需要覆盖即可
        var oDiv = document.querySelector("div");
        oDiv.onclick = function () {
            console.log(1);
        }

        // onclick这个属性的值是任何其他的值都可以  ---  覆盖
        oDiv.onclick = null;


        // 2级事件
        // oDiv.addEventListener('click', function () {
        //     console.log(1);
        // })
        // oDiv.addEventListener('click', function () {
        //     console.log(2);
        // })

        // 匿名函数，无法移除


        // oDiv.addEventListener('click', fn1);
        // oDiv.addEventListener('click', fn2);




        function fn1() {
            console.log(1);
        }

        function fn2() {
            console.log(2);
        }


        // oDiv.removeEventListener('click', fn1);
        // oDiv.removeEventListener('click', fn2);


        // IE
        // oDiv.attachEvent('onclick', fn1);
        // oDiv.attachEvent('onclick', fn2);

        // // IE移除
        // oDiv.detachEvent('onclick', fn1);




        // 2级事件 --- 可能会存在多个  --- 需要一个一个的移除

        // 移除2级事件的前提是  绑定事件的时候必须是具名函数
        // 移除事件的语法  removeEventListener(type , cb)



        addEvent(oDiv, 'click', fn1);
        addEvent(oDiv, 'click', fn2);

        removeEvent(oDiv, 'click', fn1);



        // 添加事件监听
        function addEvent(ele, type, cb) {
            // 判断浏览器是否识别这个方法
            if (window.addEventListener) {
                // 执行这个方法
                ele.addEventListener(type, cb)
            } else {
                // IE8
                ele.attachEvent('on' + type, cb)
            }
        }

        // 移除事件监听
        function removeEvent(ele, type, cb) {
            // 主流浏览器移除事件
            if (window.removeEventListener) {
                ele.removeEventListener(type, cb)
            } else {
                // IE8移除事件
                ele.detachEvent('on' + type, cb)
            }
        }








        addEvent();


        // function addEvent() {
        //     if(window.addEventListener){
        //         oDiv.removeEventListener('click', function() {
        //             console.log(1)
        //         });
        //     } else {
        //         oDiv.attachEvent('onclick' , function( ) {
        //             console.log(1);
        //         })
        //     }
        // }


        // addEvent(oDiv , 'click') ;

        // addEvent(oH2 , 'dblclick');


        function addEvent(ele, type, cb) {
            if (window.addEventListener) {
                ele.removeEventListener(type, cb);
            } else {
                ele.attachEvent('on' + type, cb)
            }
        }

    </script>

</body>

</html>